/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.error-notice {
  --errpadding: 20px;

  margin: var(--errpadding);
  padding: var(--errpadding);
  border-radius: var(--pad);
  background-color: var(--error-bg-color);
  color: var(--error-fg-color);
  display: flex;
  flex-direction: row;
  gap: var(--pad);
  cursor: pointer;
  flex-wrap: wrap;
  max-width: 100%;
}

.error-notice-arrow {
  margin-top: calc(var(--errpadding) / 2);
}

.error-notice-row {
  display: flex;
  flex-direction: row;
}
.error-notice-content {
  display: flex;
  flex-direction: column;
  max-width: calc(100% - var(--errpadding));
}

.error-notice-title {
  font-weight: bold;
}
.error-notice-stack-trace {
  white-space: pre-wrap;
  font-family: monospace;
  cursor: text;
}
.error-notice-byline {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.error-notice-details {
  padding: var(--pad);
  white-space: pre-wrap;
  word-break: break-word;
  width: 100%;
}

.error-notice-left {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  overflow: hidden;
  gap: var(--pad);
}

.inline-error-badge > * {
  display: flex;
  flex-direction: row;
  gap: var(--pad);
  align-items: center;

  background-color: var(--error-bg-color);
  color: var(--error-fg-color);
  font-weight: 600;
  border-radius: var(--halfpad);
  padding: var(--halfpad) var(--pad);
}

.inline-error-tooltip {
  max-width: 500px;
}
